<!--
  权限表添加页面
  User: 高祥
  Date: 2020-02-13
-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >

    <div id="tree_1" class="tree-demo">
        <ul>
            <li data-jstree='{ "opened" : true ,"icon" : "fa fa-asterisk fa-spin icon-state-info"}' data-id="0" data-name="顶级目录">
                顶级目录（Root）
                <ul>
                    <li th:each="data,iterStat : ${permissionList}" th:data-id="${data.id}" th:data-jstree="'{\'icon\':\''+${data.icon}+'\'}'" th:data-name="${data.name}">
                        <span th:text="${data.name}"></span>
                        <ul th:if="${data.permissions.size() > 0}">
                                <li th:each="data2,iterStat2 : ${data.permissions}" th:data-id="${data2.id}" th:data-jstree="'{\'icon\':\''+${data2.icon}+'\'}'" th:data-name="${data2.name}">
                                    <span th:text="${data2.name}"></span>
                                    <ul th:if="${data2.permissions.size() > 0}">
                                            <li th:each="data3,iterStat3 : ${data2.permissions}" th:data-id="${data3.id}" th:data-jstree="'{\'icon\':\''+${data3.icon}+'\'}'" th:data-name="${data3.name}">
                                                <span th:text="${data3.name}"></span>
                                            </li>
                                    </ul>
                                </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div>
        <input type="hidden" id="powerDataId">
        <input type="hidden" id="powerDataName">
    </div>

    <script>
        $('#tree_1').jstree({
            "core" : {
                "themes" : {
                    "responsive": false
                }
            },
            "types" : {
                "default" : {
                    "icon" : "fa fa-folder icon-state-warning icon-lg"
                },
                "file" : {
                    "icon" : "fa fa-file icon-state-warning icon-lg"
                }
            },
            "plugins": ["types"]
        });

        // handle link clicks in tree nodes(support target="_blank" as well)
        $('#tree_1').on('select_node.jstree', function(e,data) {
            var li = $('#' + data.selected);
            $("#powerDataId").val(li.attr("data-id")) ;
            $("#powerDataName").val(li.attr("data-name")) ;
        });

        /**
         * 将选择的分类添加到页面
         */
        function changeParent(){
            var id = $("#powerDataId").val();
            var name = $("#powerDataName").val();
            if(id != "" && name != ""){
                $("#powerNameShow").html(name);
                $("input[name='parentId']").val(id);
                return true;
            }else{
                layer.msg("您的选择有误，请重新选择；", {icon: 2});
                return false;
            }
        }
    </script>
</html>